<template>
  <div class="login">
    <el-form :model="form" ref="formRef" :rules="rules" class="login_form">
      <h2 class="title">用户登录</h2>
      <el-form-item class="form-item" prop="username">
        <el-icon :size="20" color="#999" class="icon left_icon">
          <Avatar />
        </el-icon>
        <el-input v-model="form.username" class="login_input" />
      </el-form-item>
      <el-form-item class="form-item" prop="password">
        <el-icon :size="20" color="#999" class="icon left_icon">
          <Lock />
        </el-icon>
        <el-input v-model="form.password" :type="showPwd ? 'password' : 'text'" />
          <el-icon @click="showPassword" :size="18" color="#999" class="icon right_icon">
            <Hide v-if="showPwd" />
            <View v-else />
          </el-icon>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitForm(formRef)" type="primary" class="submit">登录</el-button>
      </el-form-item>
  </el-form>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { Avatar, Lock, Hide, View } from '@element-plus/icons-vue'
import { MyLogin } from '@/http/login.js'

export default {
  name: '',
  components: {
    Avatar,
    Lock,
    Hide,
    View
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    const form = reactive({
      username: '',
      password: ''
    })
    const showPwd = ref(true)
    const formRef = ref(null)
    // 账号正则
    const validatePass = (_, value, callback) => {
      const reg = /^[a-zA-Z]{3,8}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入3~8位大小写字母'))
      }
    }
    // 密码正则
    const validatePass2 = (_, value, callback) => {
      const reg = /^[a-zA-Z0-9]{4,6}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入4~6位大小写字母和数字'))
      }
    }
    // 自定义校验规则
    const rules = reactive({
      username: [{ validator: validatePass, trigger: 'blur' }],
      password: [{ validator: validatePass2, trigger: 'blur' }]
    })
    // 登录按钮验证
    const submitForm = (formEl) => {
      if (!formEl) return
      formEl.validate(async(valid) => {
        // 校验成功
        if (valid) {
          const data = await MyLogin(form)
          sessionStorage.setItem('username', data.username)
          // 将 token 存入vuex中
          store.commit('setToken', data.token)
          router.replace('/')
          ElMessage.success('登录成功')
        } else {
          // 校验失败
          ElMessage.error('请正确填写表单')
          return false
        }
      })
    }
    // 显示影藏密码
    const showPassword = () => {
      showPwd.value = !showPwd.value
    }
    
    return {
      form,
      showPwd,
      rules,
      formRef,
      showPassword,
      submitForm
    }
  },
}

</script>
<style scoped lang="scss">
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;
}
.login_form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  z-index: 2;
}
:deep(.el-input) {
  height: 42px;
}
:deep(.el-input__inner) {
  padding-left: 35px;
  height: 42px;
}
.title {
  margin-bottom: 25px;
  text-align: center;
  font-size: 25px;
  color: #fff;
}
.form-item {
  position: relative;
  margin-bottom: 25px;
}
.icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
}
.left_icon {
  left: 10px;
}
.right_icon {
  right: 10px;
}
.submit {
  width: 100%;
  height: 35px;
}
</style>